﻿@page "/home"

<div class="container mt-3">
    <!-- 标题区域 -->
    <div class="text-center mb-4">
        <h1>毛概刷题软件</h1>
        <p class="lead">欢迎使用毛概刷题软件，助你轻松备考。</p>
    </div>

    <!-- 图片展示区 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <img src="images/pic1.jpg" class="img-fluid" alt="描述图片1">
        </div>
        <div class="col-md-4">
            <img src="images/pic2.jpg" class="img-fluid" alt="描述图片2">
        </div>
        <div class="col-md-4">
            <img src="images/pic3.jpg" class="img-fluid" alt="描述图片3">
        </div>
    </div>
    <!-- 功能区 -->
    <div class="row">
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">开始刷题</h5>
                    <p class="card-text">选择题库开始你的练习，包含历年真题。</p>
                    <a href="/result" class="btn btn-primary">开始</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">单元组卷</h5>
                    <p class="card-text">随机生成题目，检验你的即时反应能力。</p>
                    <a href="/paper" class="btn btn-primary">试一试</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">查看收藏</h5>
                    <p class="card-text">查看你的收藏题目。可以复习所学题目。</p>
                    <a href="like" class="btn btn-primary">启动</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="pt-4 my-md-5 pt-md-5 border-top">
        <div class="row">
            <div class="col-12 col-md">
                <small class="d-block mb-3 text-muted">&copy; 2023 毛概刷题软件</small>
            </div>
        </div>
    </footer>
</div>

@code {
    // Your C# code goes here
}
